<template>
<div class="dh">
    <div class="headk">
      <img class="headkico1" src="../../assets/back.png" alt="返回" @click="back">
      <div class="headtext" @click="hw" :style="{left:headtext1}">澳门</div>
      <img class="headkico2" @click="hw" src="../../assets/airticket/qiehuan.png" alt="切换">
      <div class="headtext" @click="hw" :style="{left:headtext2}">帕劳</div>
      <Checkbox class="headcheck" v-model="single">往返</Checkbox>
    </div>
  <div v-show="single">
    <div class="calendardk">
    <div class="calendark">
      <div class="calendartext">{{isyear}}年{{ismonth}}月</div>
      <div class="checkcalendar" @click="checkmonth">
        <img class="calendarico" src="../../assets/airticket/rili.png">
        <div>选择月份</div>
      </div>
    </div>
    </div>
    <div class="checkmonthkmb" v-show="checkmonthheight!='0vh'" @click="xzyf(ismonth-1)">
    
    </div>
    <div class="checkmonthk" :style="{height: checkmonthheight}">
      <div class="monthtitle">{{isyear}}</div>
      <div class="monthk">
      <div v-for="(item,index) in month" :key="index" class="monthimg" >
        <div class="monthimgtext3" v-show="index == ismonth-1">{{index+1}}月</div>
        <div class="monthimgtext2" v-show="index < varmonth-1">{{index+1}}月</div>
        <div class="monthimgtext" v-show="index >= varmonth-1" @click="xzyf(index)">{{index+1}}月</div>
      </div>
      </div>
    </div>
    <div class="hdgc"></div>
    <div v-for="(item,index) in air" :key="index">
    <div class="ticketk" v-show="item.month == ismonth && type == item.type && item.Back.back" @click="xq(index)">
      <div class="ticketleft">特价机票</div>
      <div class="ticketone">
        <div class="displayf">
          <div class="textk">
            <div class="text1">{{item.Flight_departure_time | formatDate}}</div>
            <div class="text2" v-show="type == 0">{{item.Departure_Location}}</div>
            <div class="text2" v-show="type == 1">{{item.Arrival_location}}</div>
          </div>
          <div class="text3">————</div>
          <div class="textk">
            <div class="text1"><span v-show="item.cr == 1" class="text11">次日</span>{{item.Flight_arrival_time | formatDate}}</div>
            <div class="text2" v-show="type == 0">{{item.Arrival_location}}</div>
            <div class="text2" v-show="type == 1">{{item.Departure_Location}}</div>
          </div>
        </div>
        <div class="text4"><span class="text5">￥</span>{{item.money/100}}</div>
      </div>
      <div class="tickettwo">
        <div class="displayf">
          <img src="../../assets/airticket/xiangqin.png" class="ico1">
          <div class="text6">详情</div>
        </div>
        <div class="displayf">
          <div class="text7">{{item.Flight_departure_time | yr}}</div>
          <div class="text8" @click="openbuy(item)">订</div>
        </div>
      </div>
      <div v-show="item.xq == 1">
        <div class="xqk">
          <div>去程</div>
          <div>{{item.Flight_departure_time | yr}}{{item.Flight_departure_time | formatDate}}</div>
          <!-- <div>{{item.Flight_company_name}} | {{item.Aircraft_type}}</div> -->
          <!-- <div>￥{{item.Money/100}}</div> -->
        </div>
        <div class="xqk">
          <div>返程</div>
          <div>{{item.Back.Flight_departure_time | yr}}{{item.Back.Flight_departure_time | formatDate}}</div>
          <!-- <div>{{item.Back.Flight_company_name}} | {{item.Back.Aircraft_type}}</div> -->
          <!-- <div>￥{{item.Back.Money/100}}</div> -->
        </div>
      </div>
    </div>
    </div>
  </div>
  <div v-show="!single">
    <div class="calendardk">
    <div class="calendark">
      <div class="calendartext">{{isyear}}年{{ismonth}}月</div>
      <div class="checkcalendar" @click="checkmonth">
        <img class="calendarico" src="../../assets/airticket/rili.png">
        <div>选择月份</div>
      </div>
    </div>
    </div>
    <div class="checkmonthkmb" v-show="checkmonthheight!='0vh'" @click="xzyf(ismonth-1)">
    <div class="checkmonthk" :style="{height: checkmonthheight}">
      <div class="monthtitle">{{isyear}}</div>
      <div class="monthk">
      <div v-for="(item,index) in month" :key="index" class="monthimg" >
        <div class="monthimgtext3" v-show="index == ismonth-1">{{index+1}}月</div>
        <div class="monthimgtext2" v-show="index < varmonth-1">{{index+1}}月</div>
        <div class="monthimgtext" v-show="index >= varmonth-1" @click="xzyf(index)">{{index+1}}月</div>
      </div>
      </div>
    </div>
    </div>
    <div class="hdgc"></div>
    <div v-for="(item,index) in air" :key="index">
    <div class="ticketk" v-show="item.month == ismonth && type == item.type && !item.Back.back">
      <div class="ticketleft">特价机票</div>
      <div class="ticketone">
        <div class="displayf">
          <div class="textk">
            <div class="text1">{{item.Flight_departure_time | formatDate}}</div>
            <div class="text2" v-show="type == 0">{{item.Departure_Location}}</div>
            <div class="text2" v-show="type == 1">{{item.Arrival_location}}</div>
          </div>
          <div class="text3">————</div>
          <div class="textk">
            <div class="text1"><span v-show="item.cr == 1" class="text11">次日</span>{{item.Flight_arrival_time | formatDate}}</div>
            <div class="text2" v-show="type == 0">{{item.Arrival_location}}</div>
            <div class="text2" v-show="type == 1">{{item.Departure_Location}}</div>
          </div>
        </div>
        <div class="text4"><span class="text5">￥</span>{{item.money/100}}</div>
      </div>
      <div class="tickettwo">
        <div class="displayf">
          <img src="../../assets/airticket/airico.png" class="ico1">
          <div class="text6">{{item.Flight_company_name}} | {{item.Aircraft_type}}</div>
        </div>
        <div class="displayf">
          <div class="text7">{{item.Flight_departure_time | yr}}</div>
          <div class="text8" @click="openbuy(item)">订</div>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>
</template>
<script>
import { get_air } from "@/api/air";
import { formatDate } from "@/utils/formatDate";
export default {
  name: "",
  data() {
    return {
      headtext1: "35%",
      headtext2: "60%",
      single: true, //是否默认往返
      checkmonthheight: "0vh",
      isyear: 2018,
      ismonth: 10, //当前月份
      isdate: 0, //当前日期
      varmonth: 0, //不变的月份
      type: 0, //默认澳门飞帕劳是0，帕劳飞澳门是1
      month: [
        require("../../assets/airticket/one.png"),
        require("../../assets/airticket/two.png"),
        require("../../assets/airticket/three.png"),
        require("../../assets/airticket/four.png"),
        require("../../assets/airticket/five.png"),
        require("../../assets/airticket/six.png"),
        require("../../assets/airticket/seven.png"),
        require("../../assets/airticket/eight.png"),
        require("../../assets/airticket/nine.png"),
        require("../../assets/airticket/ten.png"),
        require("../../assets/airticket/eleven.png"),
        require("../../assets/airticket/twelve.png")
      ],
      air: []
    };
  },
  created: function() {
    let time = new Date();
    this.isyear = time.getFullYear();
    this.ismonth = time.getMonth() + 1;
    this.varmonth = time.getMonth() + 1;
    this.isdate = time.getDate();
    this.hqsj();
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, "hh:mm");
    },
    yr(time) {
      var date = new Date(time);
      return formatDate(date, "MM月dd日");
    }
  },
  methods: {
    //详情
    xq(e) {
      console.log(e);
      let a = this.air;
      if (a[e].xq == 1) {
        a[e].xq = 0;
        this.air = a;
      } else {
        a[e].xq = 1;
        this.air = a;
      }
    },
    //下单
    openbuy(item) {
      console.log(item);
      item["type"] = "机票";
      let data = item;
      console.log(data);
      this.$router.push({
        name: "下单",
        params: {
          data
        }
      });
    },
    //返回
    back() {
      this.$router.go(-1);
    },
    //获取数据
    hqsj() {
      get_air().then(res => {
        let a = res.data;
        let b = a;
        for (let i = 0; i < a.length; i++) {
          b[i].month = a[i].Flight_departure_time.split("-")[1];
          if (a[i].Arrival_location.indexOf("帕劳") != -1) {
            b[i].type = 0;
          } else {
            b[i].type = 1;
          }
          let c = a[i].Flight_departure_time.split("T")[0];
          let d = a[i].Flight_arrival_time.split("T")[0];
          b[i].date = c.split("-")[1] + "月" + c.split("-")[2] + "日";
          if (a[i].Back.back == true) {
            b[i].money = a[i].Money + a[i].Back.Money;
          } else {
            b[i].money = a[i].Money;
          }
          if (parseInt(d.split("-")[2]) - parseInt(c.split("-")[2]) > 0) {
            b[i].cr = 1;
          } else {
            b[i].cr = 0;
          }
          b[i].xq = 0;
        }
        this.air = b;
        console.log(this.air);
      });
    },
    //换位
    hw() {
      if (this.type == 0) {
        this.type = 1;
        let that = this;
        let a = 0;
        let b = setInterval(() => {
          a = a + 1;
          that.headtext1 = parseFloat(that.headtext1) + 0.5 + "%";
          that.headtext2 = parseFloat(that.headtext2) - 0.5 + "%";
          if (a == 50) {
            clearInterval(b);
          }
        }, 10);
      } else {
        this.type = 0;
        let that = this;
        let a = 0;
        let b = setInterval(() => {
          a = a + 1;
          that.headtext1 = parseFloat(that.headtext1) - 0.5 + "%";
          that.headtext2 = parseFloat(that.headtext2) + 0.5 + "%";
          if (a == 50) {
            clearInterval(b);
          }
        }, 10);
      }
    },
    //显示选择月份的框
    checkmonth() {
      let that = this;
      let a = 0;
      let b = setInterval(() => {
        a = a + 1;
        that.checkmonthheight = parseFloat(that.checkmonthheight) + 0.88 + "vh";
        if (a == 51) {
          clearInterval(b);
        }
      }, 5);
    },
    //选择月份
    xzyf(e) {
      console.log(e);
      this.ismonth = e + 1;
      let that = this;
      let a = 0;
      let b = setInterval(() => {
        a = a + 1;
        that.checkmonthheight = parseFloat(that.checkmonthheight) - 0.88 + "vh";
        if (a == 51) {
          clearInterval(b);
          this.checkmonthheight = "0vh";
        }
      }, 5);
    }
  }
};
</script>
<style scoped>
.dh {
  width: 100%;
  height: 100%;
}
.headk {
  height: 100px;
  display: flex;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
  position: fixed;
  background-color: #fff;
  width: 100%;
  top: 0;
  z-index: 10000;
}

.headkico1 {
  height: 34px;
  margin-left: 40px;
  margin-top: 33px;
  content: none;
}

.headkico2 {
  width: 34px;
  height: 34px;
  margin-left: 300px;
  margin-top: 33px;
  content: none;
}

.headtext {
  font-size: 36px;
  line-height: 100px;
  position: absolute;
  color: #000;
}

.calendardk {
  width: 100%;
  height: 140px;
  background-color: #fff;
  display: flex;
  position: fixed;
  top: 100px;
  z-index: 10000;
}

.calendark {
  margin-top: 20px;
  width: 90%;
  margin-left: 5%;
  border-radius: 20px;
  height: 100px;
  background-color: #ff7900;
  display: flex;
  /* position: fixed;
  top: 100px; */
  /* z-index: 10000; */
}

.hdgc{
  height: 220px;
}

.calendartext {
  width: 70%;
  /* border: solid 1px #000 */
  font-size: 40px;
  line-height: 100px;
  text-align: center;
  color: #fff;
}

.checkcalendar {
  width: 30%;
  color: #fff;
  text-align: center;
  border-left: solid 1px rgba(255, 255, 255, 0.2);
}

.calendarico {
  width: 40px;
  height: 40px;
  margin-top: 10px;
}

.checkmonthkmb {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 100000;
}

.checkmonthk {
  position: fixed;
  width: 90%;
  box-shadow: 0 0 10px #333333;
  background-color: #fff;
  top: 120px;
  margin-left: 5%;
  border-radius: 20px;
  padding: 0 5%;
  overflow: hidden;
  z-index: 1000000;
}

.monthtitle {
  text-align: center;
  line-height: 88px;
  height: 88px;
  font-size: 45px;
  border-bottom: solid 1px #bcbcbc;
}

.monthk {
  width: 100%;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
}

.monthimg {
  width: 24%;
  height: 130px;
  margin-top: 20px;
}

.monthimgzz {
  background-color: rgba(0, 0, 0, 0.5);
  width: 22.5%;
  height: 130px;
  position: absolute;
}

.monthimgtext {
  text-align: center;
  height: auto;
  width: 100%;
  line-height: 130px;
  font-size: 40px;
}

.monthimgtext2 {
  text-align: center;
  height: 100%;
  width: 100%;
  line-height: 130px;
  font-size: 40px;
  color: rgba(0, 0, 0, 0.3);
}

.monthimgtext3 {
  text-align: center;
  width: 22.5%;
  height: 130px;
  position: absolute;
  line-height: 130px;
  font-size: 40px;
  background-color: #d5e8fc;
}

.monthimgsize {
  height: 100%;
  width: 100%;
}

.ticketk {
  border: solid 1px #c8c8c8;
  border-radius: 10px;
  /* height: 212px; */
  width: 93%;
  margin-left: 3.5%;
  margin-top: 20px;
  padding: 0 5%;
}

.ticketleft {
  height: 30px;
  width: 125px;
  background-color: #fff1e5;
  position: absolute;
  color: #ff7900;
  font-size: 19px;
  text-align: center;
  line-height: 30px;
  border-radius: 5px;
  margin-left: -5%;
}

.ticketone {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
}

.tickettwo {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.displayf {
  display: flex;
}

.textk {
  width: 160px;
  /* margin-top: 20px */
}
.text11 {
  color: red;
  font-size: 18px;
  margin-top: -1px;
}
.text1 {
  font-size: 38px;
  color: #000;
  text-align: center;
  margin-top: 5px;
}

.text2 {
  text-align: center;
  font-size: 16px;
}

.text3 {
  margin-left: 15px;
  margin-right: 15px;
  margin-top: 24px;
}

.text4 {
  color: #ff7900;
  font-size: 45px;
}

.text5 {
  color: #ff7900;
  font-size: 30px;
}

.text6 {
  color: #969696;
  font-size: 22px;
  line-height: 26px;
}

.text7 {
  color: #ff7900;
  font-size: 22px;
}

.text8 {
  color: #fff;
  background-color: #ff7900;
  font-size: 40px;
  width: 70px;
  height: 70px;
  line-height: 70px;
  text-align: center;
  margin-left: 23px;
  border: solid 1px #ff7900;
  border-radius: 10px;
  margin-top: -40px;
}

.ico1 {
  width: 26px;
  height: 26px;
  margin-right: 5px;
}

.headcheck {
  font-size: 35px;
  position: absolute;
  right: 0;
  height: 100px;
  line-height: 100px;
}

.xqk {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
</style>